<template>
  <div class="">
    <el-dialog title="权限管理" :visible.sync="dialogTableVisible">
      <div class="tc-qx">
        <el-row :gutter="20">
          <el-col :span="6">姓名：{{ isData.name }}</el-col>
          <el-col :span="6">学号：{{ isData.no }}</el-col>
        </el-row>

        <div class="tc-select">
          <el-checkbox-group v-model="selectQx" @change="changecheck">
            <el-checkbox
              :label="item.groupId"
              v-for="(item, index) in qxList"
              :key="index"
              :disabled="item.change == false ? true : false"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="searBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { usergroupedit, groupsearch } from '@/api/comment/studentList.js';
export default {
  data() {
    return {
      //弹框列表
      dialogTableVisible: false,
      isData: {}, //当前选择数据
      grouForm: {},
      qxList: [], //权限列表
      selectQx: [], //已选权限

      oneS: [], //当前进入页面的时候选中的参数
      twoS: [] //没有选中的参数
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //弹框--打开弹框
    qxdata(val) {
      this.isData = val;

      this.getgroupsearch({ _id: val._id });

      this.dialogTableVisible = true;
    },

    //多选选择
    changecheck(e) {
      this.grouForm.add = [];
      this.grouForm.del = [];
      e.forEach((item) => {
        //如果不是-1证明在里面就删除
        if (this.twoS.indexOf(item) != -1) {
          this.grouForm.add.push(item);
        }
      });

      this.oneS.forEach((item) => {
        if (e.indexOf(item) == -1) {
          this.grouForm.del.push(item);
        }
      });
    },

    //确定按钮
    searBtn() {
      this.grouForm.no = this.isData.no;
      this.getusergroupedit();
    },

    //弹框--权限列表
    async getgroupsearch(data) {
      let res = await groupsearch(data);
      console.log(res);
      if (res.code == 0) {
        this.qxList = res.data;
        this.selectQx = [];
        this.oneS = [];
        this.twoS = [];
        this.qxList.forEach((element) => {
          if (element.select) {
            this.selectQx.push(element.groupId);
            this.oneS.push(element.groupId); //一进入页面就选中的数据
          } else {
            this.twoS.push(element.groupId); // 一进入页面未选中的数据
          }
        });
      }
    },

    //弹框---修改权限
    async getusergroupedit() {
      let res = await usergroupedit(this.grouForm);
      console.log(res);
      if (res.code == 0) {
        this.$message({
          message: '操作成功',
          type: 'success'
        });

        this.dialogTableVisible = false;
      }
    }
  },

  components: {}
};
</script>

<style lang="scss" scoped>
.tc-qx {
  box-sizing: border-box;
  padding: 10px;

  .tc-select {
    margin-top: 20px;

    .el-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
  }
}
</style>
